@import '../../styles/variables';
@import '../../styles/mixins';

.header {
  @include headerAngles($ms-color-neutralLighter);
  @include contentPadding(80px, 140px);
  @include fullWidth();
  background-color: $color-home-darker;
  margin-bottom: 40px;

  h1 {
    color: $ms-color-white;
    font-size: $font-size-biggest;
    font-weight: $ms-font-weight-light;
    line-height: 1.5;
    margin-bottom: 8px;
  }

  span {
    color: $ms-color-neutralLight;
    display: block;
    font-size: $font-size-big;
    font-weight: $ms-font-weight-semilight;
    line-height: 1.25;
    max-width: 500px;
  }

  .button {
    @include ghostButton($color-home-lighter, $color-home-dark);
    font-size: $ms-font-size-l;
    margin-top: 32px;
    display: inline-block;
  }
}

.overview {
  margin-bottom: 80px;

  .overviewText {
    color: $ms-color-neutralPrimary;
    font-size: $ms-font-size-xl;
  }

  .overviewLink {
    color: $ms-color-themePrimary;
  }
}

.overviewImageWrapper {
  text-align: center;
}

.features {
  color: $ms-color-neutralDark;
}

.featureHeadline {
  display: block;
  font-size: $font-size-big;
  font-weight: $ms-font-weight-semilight;
  line-height: 1.5;
  margin-bottom: 12px;
}

.trademark {
  color: $ms-color-neutralSecondary;
  display: block;
  font-size: $ms-font-size-s;
  margin-top: 120px;
}
